<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Autoplay browser policy example</title>

    <script src="../../dist/modern/umd/dash.all.debug.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/main.css" rel="stylesheet">

    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>

    <script class="code">
        function init() {
            var video,
                player,
                url = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd';

            video = document.querySelector('video');
            player = dashjs.MediaPlayer().create();

            /* restart playback in muted mode when auto playback was not allowed by the browser */
            player.on(dashjs.MediaPlayer.events.PLAYBACK_NOT_ALLOWED, function (data) {
                console.log('Playback did not start due to auto play restrictions. Muting audio and reloading');
                video.muted = true;
                player.initialize(video, url, true);
            });

            player.initialize(video, url, true);
        }
    </script>
</head>
<body>

<main>
    <div class="container py-4">
        <header class="pb-3 mb-4 border-bottom">
            <img class=""
                 src="../lib/img/dashjs-logo.png"
                 width="200">
        </header>
        <div class="row">
            <div class="col-md-4">
                <div class="h-100 p-5 bg-light border rounded-3">
                    <h3>Autoplay browser policy example</h3>
                    <p>This sample shows how to deal with autoplay browsers policy. It uses an event listener to detect
                        when auto playback is interrupted by the browser and how to recover from this situation muting
                        audio.</p>
                </div>
            </div>
            <div class="col-md-8">
                <video controls="true"></video>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="code-output"></div>
            </div>
        </div>
        <footer class="pt-3 mt-4 text-muted border-top">
            &copy; DASH-IF
        </footer>
    </div>
</main>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        init();
    });
</script>
<script src="../highlighter.js"></script>
</body>
</html>
